<template>
    <div class="body">
        <div class="top">
            <div class="box left">
                <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                    <div style="padding: 20px;">
                        <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                style="width: 30px ; height: 30px;" alt=""> <b>审批工作能效</b> </p>
                        <div class="content">
                            <div>
                                <p class="img">
                                    <img src="../../../public/Government/闹钟-F.png" alt="">
                                </p>
                                <p class="text">
                                    <span style="font-size: 24px; color:#06a6ac;">98.66%</span>
                                    <span>按时办结率</span>
                                </p>
                            </div>
                            <div>
                                <p class="img" style="border: 2px solid #04c119; background-color: #055016;">
                                    <img src="../../../public/Government/闹钟2.png" alt="">
                                </p>
                                <p class="text">
                                    <span style="font-size: 24px; color:#04c119;">16.66%</span>
                                    <span>提醒办结率</span>
                                </p>
                            </div>
                            <div>
                                <p class="img" style="border: 2px solid #c4761d; background-color: #654116;">
                                    <img src="../../../public/Government/提醒.png" alt="">
                                </p>
                                <p class="text">
                                    <span style="font-size: 24px; color:#c4761d;">98件</span>
                                    <span>超时预警</span>
                                </p>
                            </div>
                            <div>
                                <p class="img" style="border: 2px solid #bc011a; background-color: #5d081a;">
                                    <img src="../../../public/Government/闹钟.png" alt="">
                                </p>
                                <p class="text">
                                    <span style="font-size: 24px; color:#bc011a;">8件</span>
                                    <span>超时办结</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </dv-border-box-6>
            </div>
            <div class="box conter">
                <div>
                    <div class="topBox">
                        <p>全年累计办件量：</p>
                        <span v-for="value in yeararray">{{value}}</span>
                    </div>
                </div>
                <div class="itemBox">
                    <div class="item">
                        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
                            <div class="itemContent">
                                <img src="../../../public/Government/danwei.png" alt="">
                                <div
                                    style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
                                    <div>入驻单位</div>
                                    <div><span style="color: #ffb200;font-size: large;">30</span>个</div>
                                </div>
                            </div>
                        </dv-border-box-7>
                    </div>
                    <div class="item">
                        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
                            <div class="itemContent">
                                <img src="../../../public/Government/window.png" alt="">
                                <div
                                    style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
                                    <div>服务窗口</div>
                                    <div><span style="color: #ffb200;font-size: large;">900</span>个</div>
                                </div>
                            </div>
                        </dv-border-box-7>
                    </div>
                    <div class="item">
                        <dv-border-box-7 :color="['#04091c', '#0f8eb5']">
                            <div class="itemContent">
                                <img src="../../../public/Government/团队.png" alt="">
                                <div
                                    style="display: flex; flex-direction: column;align-items: center;justify-content: center;gap: 5px;">
                                    <div>大厅人员</div>
                                    <div><span style="color: #ffb200;font-size: large;">4321</span>个</div>
                                </div>
                            </div>
                        </dv-border-box-7>
                    </div>
                </div>
            </div>
            <div class="box right">
                <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                    <div style="padding: 20px;">
                        <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                style="width: 30px ; height: 30px;" alt=""> <b>业务办理情况总览</b> </p>
                        <div class="content">
                            <div class="item">
                                <div class="bor"></div>
                                <div class="text">
                                    <p style="font-size: 12px;">本周累计办理数量</p>
                                    <p style="font-size: 32px; color:#00fefe;"> <b>{{weekanage}}</b></p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="bor bor1"></div>
                                <div class="text text1">
                                    <p style="font-size: 12px;">本月累计办理数量</p>
                                    <p style="font-size: 32px; color:#93f004;"> <b>{{mounthanage}}</b></p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="bor bor2"></div>
                                <div class="text text2">
                                    <p style="font-size: 12px;">本年累计办理数量</p>
                                    <p style="font-size: 32px; color:#fcfc00;"> <b>{{yearanage}}</b></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </dv-border-box-6>
            </div>
        </div>
        <div class="bom">
            <div class="left">
                <div class="box Ltop">
                    <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                        <div style="padding: 20px;">
                            <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                    style="width: 30px ; height: 30px;" alt=""> <b>入驻委办局办件情况</b> </p>
                            <div id="main" style="width: 100%; height: 200px;"></div>
                        </div>
                    </dv-border-box-6>
                </div>
                <div class="box Lcen">
                    <div>
                        <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                            <div style="padding: 20px;">
                                <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                        style="width: 30px ; height: 30px;" alt=""> <b>互联网互通整合情况</b> </p>
                                <div class="content">
                                    <div id="main1" style="width: 100%; height: 200px;"></div>
                                </div>
                            </div>
                        </dv-border-box-6>
                    </div>
                    <div class="stastify">
                        <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                            <div style="padding: 20px;">
                                <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                        style="width: 30px ; height: 30px;" alt=""> <b>办事主体概况</b> </p>
                                <div class="content">
                                    <div class="item">
                                        <div class="text">
                                            <span>个人<b style="color: #ffb600; font-size: 24px;">500</b></span>
                                            <span>法人<b style="color: #81d3f8; font-size: 24px;">250</b></span>
                                        </div>
                                        <div class="bg">
                                            <div class="co"></div>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="text">
                                            <span>已认证用户<b style="color: #09da22; font-size: 24px;">200</b></span>
                                            <span>未认证用户<b style="color: #921121; font-size: 24px;">50</b></span>
                                        </div>
                                        <div class="bg bg1">
                                            <div class="co co1"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box-6>
                    </div>
                </div>
                <div class="box Lrig">
                    <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                        <div style="padding: 20px;">
                            <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                    style="width: 30px ; height: 30px;" alt=""> <b>办件动态</b> </p>
                            <div class="content">
                                <table cellspacing="0" cellpadding="0" width="100%">
                                    <thead style="background-color: #0b254f;color: white;">
                                        <tr>
                                            <th>编号</th>
                                            <th>申办主题</th>
                                            <th>受理部门</th>
                                            <th>受理事项</th>
                                            <th>申报日期</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr align="center">
                                            <td>
                                                <span>100001</span>
                                            </td>
                                            <td>王二爷</td>
                                            <td>国税局</td>
                                            <td>这里是一条受理事项，这里是一条受理事项...</td>
                                            <td>2024-01-01</td>

                                        </tr>
                                        <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">
                                            <td>
                                                <span>100002</span>
                                            </td>
                                            <td>王三鱼</td>
                                            <td>财务局</td>
                                            <td>这里是一条受理事项，这里是一条受理事项...</td>
                                            <td>2024-01-01</td>

                                        </tr>
                                        <tr align="center">
                                            <td>
                                                <span>100003</span>
                                            </td>
                                            <td>王大爷</td>
                                            <td>教育局</td>
                                            <td>这里是一条受理事项，这里是一条受理事项...</td>
                                            <td>2024-01-01</td>
                                        </tr>
                                        <tr align="center" style="background-color: rgb(11, 37, 79,0.5);">

                                            <td>100004</td>
                                            <td>王钱多</td>
                                            <td>金融办</td>
                                            <td>这里是一条受理事项，这里是一条受理事项...</td>
                                            <td>2024-01-01</td>
                                        </tr>
                                        <tr align="center">
                                            <td>100005</td>
                                            <td>王大爷</td>
                                            <td>金融办</td>
                                            <td>这里是一条受理事项，这里是一条受理事项...</td>
                                            <td>2024-01-01</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </dv-border-box-6>
                </div>
            </div>
            <div class="right">
                <div class="Rtop">
                    <div class="Rleft">
                        <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                            <div style="padding: 20px;">
                                <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                        style="width: 30px ; height: 30px;" alt=""> <b>业务办理TOP5</b> </p>
                                <div class="content">
                                    <div class="item">
                                        <div class="num">77</div>
                                        <div class="name">入库单位</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">789</div>
                                        <div class="name">入库证照</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">334477</div>
                                        <div class="name">入库证照种类</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">4789</div>
                                        <div class="name">查验查量</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">5555</div>
                                        <div class="name">业务事项1</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">8888</div>
                                        <div class="name">业务事项2</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">3477</div>
                                        <div class="name">应用量</div>
                                    </div>
                                    <div class="item">
                                        <div class="num">8900</div>
                                        <div class="name">其他</div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box-6>
                    </div>
                    <div class="Rright">
                        <div class="item">
                            <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                                <div style="padding: 20px;">
                                    <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                            style="width: 30px ; height: 30px;" alt=""> <b>业务办理TOP5</b> </p>
                                    <div class="content">
                                        <div id="main2" style="width: 100%; height: 160px;"></div>
                                    </div>
                                </div>
                            </dv-border-box-6>
                        </div>
                        <div class="item">
                            <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                                <div style="padding: 20px;">
                                    <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                            style="width: 30px ; height: 30px;" alt=""> <b>业务窗口满意度</b> </p>
                                    <div style="display: flex;">
                                        <div class="leftPart">
                                            <div id="satisfy" style="width: 100%; height: 180px;"></div>
                                        </div>
                                        <div class="rightPart">
                                            <div id="satisfyR" style="width: 120%; height: 180px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </dv-border-box-6>
                        </div>
                    </div>
                </div>
                <div class="Rbom">
                    <div class="item">
                        <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                            <div style="padding: 20px;">
                                <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                        style="width: 30px ; height: 30px;" alt=""> <b>业务累计平均办理时长TOP5</b> </p>
                                <div id="main3" style="width: 100%; height: 200px;"></div>
                            </div>
                        </dv-border-box-6>
                    </div>
                    <div class="item">
                        <dv-border-box-6 :color="['#06a6ac', '#06a6ac']">
                            <div style="padding: 20px;">
                                <p class="tit"> <img src="../../../public/Government/分类-copy.png"
                                        style="width: 30px ; height: 30px;" alt=""> <b>业务平均办理时限统计</b> </p>
                                <div class="content">
                                    <div class="column">
                                        <div class="blue">
                                            <div class="green"></div>
                                        </div>
                                        <div class="SD"></div>
                                        <b style="left: 70px;">5天</b>
                                        <b style="left: 190px;">7天</b>
                                        <b style="left: 300px;">10天</b>
                                    </div>
                                    <div class="bor">
                                        <div class="blue">
                                            <div class="green"></div>
                                        </div>
                                        <b style="left: 10px; top: 16px;">业务实际平均办理时长</b>
                                        <b style="left: 100px; top: 50px;">业务承诺平均办理时长</b>
                                        <b style="left: 200px; top: 90px;">业务法规承诺平均办理时长</b>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box-6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref , onUnmounted } from 'vue';
import * as echarts from 'echarts';

const year = ref(123451)
const yeararray =ref([1,2,3,4,5,1])

const weekanage = ref(2306)
const mounthanage = ref(4908)
const yearanage = ref(20880)

const time = setInterval(() => {
    year.value++
    yeararray.value = year.value.toString().split('')
    weekanage.value++
    mounthanage.value++
    yearanage.value++
}, 1000)

onUnmounted(() => {
    clearInterval(time)
})

onMounted(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['区国税局', '区财政局', '区司法局', '区城管局', '区教育局', '区金融办'],
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            axisLabel: {
                color: 'white'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
        },
        series: [
            {
                data: [
                    {
                        value: 66,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#ee5554',
                        }
                    },
                    {
                        value: 51,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#ffba7f',
                        }
                    },
                    {
                        value: 87,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#b99ede',
                        }
                    },
                    {
                        value: 28,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#2accc8',
                        }
                    },
                    {
                        value: 66,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#4a92c6',
                        }
                    },
                    {
                        value: 52,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#03a613',
                        }
                    },
                ],
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    barBorderRadius: 5,
                }
            },


        ],
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option && myChart.setOption(option);

    var chartDom3 = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
        xAxis: {
            type: 'category',
            data: ['单位A', '单位B', '单位C', '单位D', '单位E'],
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            axisLabel: {
                color: 'white'
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
        },
        series: [
            {
                data: [
                    {
                        value: 36,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#ee5554',
                        }
                    },
                    {
                        value: 27,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#ffba7f',
                        }
                    },
                    {
                        value: 21,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#b99ede',
                        }
                    },
                    {
                        value: 14,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#2accc8',
                        }
                    },
                    {
                        value: 8,
                        // 设置单个柱子的样式
                        itemStyle: {
                            color: '#4a92c6',
                        }
                    }
                ],
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    barBorderRadius: 5,
                }
            },


        ],
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option3 && myChart3.setOption(option3);

    var chartDom1 = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    option1 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
                color: 'white'
            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 25, name: '邀请招标' },
                    { value: 75, name: '公开招标' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option1 && myChart1.setOption(option1);

    // 满意度环形饼图
    var satisfyChartDom = document.getElementById('satisfy');
    var satisfyChart = echarts.init(satisfyChartDom);
    var satisfyOption;
    satisfyOption = {
        series: [
            {
                type: 'gauge',
                radius: '64%',
                center: ['50%', '50%'],
                startAngle: 225, // 起始角度（从左开始）
                endAngle: -45,     // 结束角度（到右结束）
                min: 0,
                max: 100,
                splitNumber: 5, // 分割段数（0、20、40、60、80、100）
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f44336'],   // 0-20 红色
                            [0.4, '#ffab00'],   // 20-40 橙色
                            [0.6, '#ba68c8'],   // 40-60 紫色
                            [0.8, '#4dd0e1'],   // 60-80 青色
                            [1, '#8bc34a']      // 80-100 绿色
                        ]
                    }
                },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: {
                    distance: -50,
                    color: '#ffffff',
                    fontSize: 14
                },
                pointer: {
                    length: '60%',
                    width: 6,
                    itemStyle: { color: '#ffffff' }
                },
                title: { show: false },
                detail: { show: false },
                // 中心文字“满意度”
                anchorName: '满意度',
                anchor: {
                    show: true,
                    nameTextStyle: {
                        color: '#ffffff',
                        fontSize: 16
                    },
                    nameLocation: 'bottom',
                    nameDistance: 10
                },
                // 仪表盘数据（指针指向约70的位置，可根据需求调整）
                data: [{ value: 95 }]
            }
        ],
        axisPointer: {
            show: false
        }
    };
    satisfyOption && satisfyChart.setOption(satisfyOption);
    // 满意度环形电量图（右侧）
    var satisfyRChartDom = document.getElementById('satisfyR');
    var satisfyRChart = echarts.init(satisfyRChartDom);
    var satisfyROption;
    satisfyROption = {
        grid: {
            left: '15%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
        xAxis: {
            show: false
        },
        yAxis: {
            type: 'category',
            data: ['不满意', '基本满意', '非常满意'],
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#ffffff',
                fontSize: 14
            }
        },
        series: [
            {
                type: 'bar',
                data: [10, 30, 90],
                barWidth: 20,
                itemStyle: {
                    color: function (params) {
                        const colors = ['#c44a4f', '#b99ede', '#97b551'];
                        return colors[params.dataIndex];
                    },
                    borderRadius: [0, 5, 5, 0]
                },
                label: {
                    show: true,
                    position: 'right',
                    color: '#ffffff',
                    fontSize: 14,
                    formatter: '{c}%'
                },
                showBackground: true,
                backgroundStyle: {
                    color: '#607d8b'
                }
            }
        ]
    };
    satisfyROption && satisfyRChart.setOption(satisfyROption);

    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            axisLabel: {
                color: 'white'
            },
        },
        yAxis: {
            type: 'category',
            data: ['业务办理事项A', '业务办理事项B', '业务办理事项C', '业务办理事项D', '业务办理事项E'],
            axisLine: {
                lineStyle: {
                    color: 'white'
                }
            },
            // 刻度文字颜色
            axisLabel: {
                color: 'white'
            },
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [8700, 8200, 7300, 5588, 4700],
                barWidth: '60%',
            }
        ],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#00bfbf' },
                { offset: 1, color: '#bc81fd' }
            ])
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '10%',
            containLabel: true
        },
    };

    option2 && myChart2.setOption(option2);
});
</script>

<style lang="scss" scoped>
.box {
    .tit {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.body {
    width: 100%;
    height: 100%;
    margin-top: 20px;

    .top {
        width: 100%;
        height: 220px;
        display: flex;
        justify-content: space-between;

        .left {
            width: 25%;
            height: 100%;

            .content {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;

                div {
                    width: 40%;
                    height: 60px;
                    margin-bottom: 20px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .text {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                    }

                    .img {
                        padding: 8px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 2px solid #06a6ac;
                        background-color: #02466a;

                        img {
                            width: 38px;
                            height: 34px;
                        }
                    }
                }
            }
        }

        .conter {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .itemBox {
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;

                .item {
                    background-color: #04091c;

                    .itemContent {
                        height: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 5px 14px;
                        gap: 14px;

                        img {
                            width: 50px;
                            height: 50px;
                        }

                        p {
                            padding: 5px;
                            background-color: #082f60;
                            color: #81d3f8;
                            font-weight: 900;

                        }
                    }
                }
            }

            .topBox {
                width: 620px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 15px;

                span {
                    padding: 15px 10px;
                    background-color: #183a90;
                    font-weight: 900;
                    font-size: 22px;
                    color: #81d3f8;
                }
            }
        }

        .right {
            width: 25%;
            height: 100%;

            .content {
                width: 100%;
                display: flex;
                justify-content: space-around;
                margin-top: 40px;

                .item {
                    display: flex;

                    .bor {
                        width: 10px;
                        height: 80px;
                        background: linear-gradient(180deg, #00fdfe 0%, #01a9ef 100%);
                    }

                    .text {
                        width: 120px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                        background: linear-gradient(to right, #083956 0%, #081728 100%);
                    }

                    .bor1 {
                        background: linear-gradient(180deg, #00fefc 0%, #04c919 100%);
                    }

                    .text1 {
                        background: linear-gradient(to right, #076819 0%, #081728 100%);
                    }

                    .bor2 {
                        background: linear-gradient(180deg, #00fdfe 0%, #ced301 100%);
                    }

                    .text2 {
                        background: linear-gradient(to right, #797d08 0%, #081728 100%);
                    }
                }
            }
        }
    }

    .bom {
        width: 100%;
        height: 700px;
        margin-top: 10px;
        display: flex;
        justify-content: space-around;

        .left {
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .Ltop {
                width: 96%;
                height: 36%;
            }

            .Lcen {
                width: 98%;
                height: 32%;
                display: flex;
                justify-content: space-between;

                div {
                    width: 360px;
                    height: 100%;

                    .content {
                        width: 100%;
                        height: 100%;
                    }
                }

                .stastify {
                    .content {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;

                        .item {
                            width: 90%;

                            .text {
                                width: 96%;
                                height: 20px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }

                            .bg {
                                width: 98%;
                                height: 20px;
                                border-radius: 10px;
                                background-color: #81d3f8;

                                .co {
                                    width: 70%;
                                    height: 20px;
                                    border-radius: 10px;
                                    background-color: #ffb600;
                                }
                            }

                            .bg1 {
                                background-color: #921121;

                                .co {
                                    background-color: #09da22;
                                }
                            }
                        }

                    }
                }
            }

            .Lrig {
                width: 100%;
                height: 30%;
            }
        }

        .right {
            width: 58%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .Rtop {
                width: 100%;
                height: 64%;
                display: flex;
                justify-content: space-between;

                .Rleft {
                    width: 32%;
                    height: 100%;

                    .content {
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        flex-wrap: wrap;
                        margin-top: 20px;

                        .item {
                            width: 45%;
                            height: 80px;
                            display: flex;
                            justify-content: space-around;
                            align-items: center;
                            flex-direction: column;
                            background-color: #083956;
                            margin-bottom: 10px;

                            .num {
                                font-size: 28px;
                                font-weight: bold;
                                color: #fff;
                            }
                        }
                    }
                }

                .Rright {
                    width: 66%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .item {
                        width: 100%;
                        height: 48%;
                    }

                    .leftPart {
                        width: 100%;
                    }

                    .rightPart {
                        width: 100%;
                        transform: translateX(-20%);
                    }
                }
            }

            .Rbom {
                width: 100%;
                height: 35%;
                display: flex;
                justify-content: space-between;

                .item {
                    width: 48%;
                    height: 100%;

                    .column {
                        width: 80%;
                        height: 50px;
                        margin: 10px auto;
                        display: flex;
                        background-color: #02466a;
                        border-radius: 22px;
                        border: 5px solid #08cef1;
                        background-color: #664c2d;
                        border: 2px solid #8b5b20;
                        position: relative;

                        .blue {
                            width: 70%;
                            height: 50px;
                            border-radius: 22px;
                            border: 2px solid #16b1d1;
                            background-color: #1a91c0;
                            transform: translate(-2px, -2px);

                            .green {
                                width: 60%;
                                height: 50px;
                                border-radius: 22px;
                                background-color: #1b9019;
                                border: 2px solid #08c518;
                                transform: translate(-2px, -2px);
                            }
                        }

                        .SD {
                            width: 40px;
                            height: 50px;
                            background-color: #048014;
                            border-radius: 200%;
                            position: absolute;
                            left: 0;
                            transform: translate(-20%, -2px);
                            border-right: 2px solid #08c518;
                            border-left: 2px solid #058c17;
                        }

                        b {
                            position: absolute;
                            font-size: 20px;
                            color: #fff;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }

                    .bor {
                        width: 80%;
                        height: 100px;
                        margin: 0 auto;
                        border-left: 2px solid white;
                        border-bottom: 2px dashed #ea9322;
                        border-right: 2px solid #ea9322;
                        position: relative;
                        .blue{
                            width: 66%;
                            height: 60px;
                            border-bottom: 2px dashed #02a7f0;
                            border-right: 2px solid #02a7f0;
                            .green{
                                width: 56%;
                                height: 26px;
                                border-bottom: 2px dashed #04d819;
                                border-right: 2px solid #04d819;
                            }
                        }
                        b{
                            position: absolute;
                            color: #fff;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}
</style>